<template>
  <div class="container">
    <div class="user-info">
      <div class="info-item">
        <div class="name">实名认证</div>
        <div class="text">{{vertifyData.name}}</div>
      </div>
      <div class="info-item">
        <div class="name">证件类型</div>
        <div class="text">居民身份证</div>
      </div>
      <div class="info-item">
        <div class="name">证件号码</div>
        <div class="text">{{showCard}}</div>
        <!-- card.replace(/^(.{4})(?:\d+)(.{4})$/,"$1**********2") -->
      </div>
    </div>
    <div class="card-info">
      <div class="tip"></div>
      <div class="item-info">
        <div class="account">
          <div class="name">银行账号</div>
          <input type="number" placeholder="请输入银行卡账号" v-model="bindParams.cardNo" />
          <img
            v-show="bindParams.cardNo"
            @click="()=>{this.bindParams.cardNo = ''}"
            src="../assets/login/delete.png"
            alt="#"
          />
        </div>
        <div class="phone">
          <div class="name">预留号码</div>
          <input type="number" v-model="bindParams.ystMobile" />
          <img
            src="../assets/login/delete.png"
            v-show="bindParams.ystMobile"
            alt="#"
            @click="()=>{this.bindParams.ystMobile = ''}"
          />
        </div>
        <div class="code">
          <div class="name">短信验证</div>
          <input type="number" placeholder="输入短信验证码" v-model="bindParams.code" />
          <div class="send_code">
            <span v-if="!downShow" @click="getBindcardCode">获取验证码</span>
            <span v-else class="downNum-btn">重新发送（{{downNum+'s'}}）</span>
          </div>
        </div>
      </div>
    </div>
    <div
      :class="bindParams.cardNo && bindParams.ystMobile && bindParams.code ? 'btn active' : 'btn'"
      @click="_bindBankcard"
    >确认绑定</div>
  </div>
</template>

<script>
import { persongGetVertifyData } from "@/api/authentication";
import {
  checkBankCard,
  getLimitList,
  applybindBankcard,
  bindBankcard,
  applyUnbindBankcard,
  unBindBankcard,
  withdrawBuy,
  rechargeBuy,
  rechargeGetquick,
  rechargeQuickbuy,
  getCompanyCard,
  withdrawBuyCompany,
  resendWithdrawCode,
  confirmWithdrawBuyCompany,
  checkSign
} from "@/api/rechargeWithDrawal";
import { Notify } from "vant";
export default {
  data() {
    return {
      vertifyData: {},
      showCard: "",
      // 绑定银行卡获取验证码参数
      bindParams: {
        cardNo: "",
        ystMobile: "",
        code: ""
      },
      downShow: false,
      timer: null,
      downNum: ""
    };
  },
  created() {
    this.getVertifyData();
  },
  watch: {
    ["phone"](val) {
      if (val.length > 11) {
        this.bindParams.ystMobile = val.substring(0, 11);
      }
    },
    ["code"](val) {
      if (val.length > 6) {
        this.bindParams.code = val.substring(0, 6);
      }
    }
  },
  computed: {
    phone() {
      return this.bindParams.ystMobile;
    },
    code() {
      return this.bindParams.code;
    }
  },
  methods: {
    // 获取个人实名认证信息
    getVertifyData() {
      persongGetVertifyData().then(res => {
        if (res.code == 1) {
          console.log(res);
          this.vertifyData = res.data;
          let reg = /^(\d{4})\d+(\d{4})$/;
          this.showCard = this.vertifyData.idcard.replace(
            reg,
            "$1**********$2"
          );
        } else {
          Notify({ type: "warning", message: "个人实名信息获取失败" });
        }
      });
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取绑定银行卡验证码
    getBindcardCode() {
      if (this.bindParams.cardNo == "") {
        Notify({ type: "warning", message: "请输入银行卡号" });
      } else if (this.bindParams.ystMobile == "") {
        Notify({ type: "warning", message: "请输入预留手机号" });
      } else {
        console.log("获取绑定银行卡验证码参数", this.bindParams);
        applybindBankcard(this.bindParams).then(res => {
          // console.log("获取绑定银行卡验证码", res);
          if (res.code == 1) {
            this.countDown();
            Notify({ type: "success", message: "发送成功，请注意查收短信" });
          } else {
            Notify({ type: "warning", message: res.msg || "发送失败" });
          }
        });
      }
    },
    // 确认绑定
    _bindBankcard() {
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      console.log("绑卡参数", this.bindParams);
      if (this.bindParams.cardNo == "") {
        Notify({ type: "warning", message: "请输入银行卡号" });
      } else if (this.bindParams.ystMobile == "") {
        Notify({ type: "warning", message: "请输入预留手机号" });
      } else if (
        this.bindParams.ystMobile &&
        !reg.test(this.bindParams.ystMobile)
      ) {
        Notify({ type: "warning", message: "手机号码格式错误" });
      } else if (this.bindParams.code == "") {
        Notify({ type: "warning", message: "请输入验证码" });
      } else {
        bindBankcard(this.bindParams).then(res => {
          // console.log("确认绑定银行卡", res);
          if (res.code == 1) {
            Notify({ type: "success", message: "银行卡绑定成功" });
            this.$router.back(-1);
          } else {
            Notify({ type: "warning", message: res.msg || "绑定失败" });
          }
        });
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  padding: 20px 0;
  background-color: #f7f7f7;
  > .user-info {
    background-color: #fff;
    margin-bottom: 20px;
    > .info-item {
      display: flex;
      justify-content: space-between;
      align-content: center;
      padding: 36px 30px;
      font-size: 30px;
      font-weight: 400;
      color: rgba(17, 17, 17, 1);
      border-bottom: 1px solid #f2f2f2;
      &:last-of-type {
        border: none;
      }
    }
  }
  > .card-info {
    background-color: #fff;
    margin-bottom: 90px;
    > .item-info {
      text-align: left;
      > .account,
      > .phone,
      > .code {
        display: flex;
        align-items: center;
        padding: 36px 30px;
        border-bottom: 1px solid #f2f2f2;
        > img {
          width: 26px;
          height: 26px;
          margin-left: auto;
        }
        > input {
          width: 65%;
          font-size: 30px;
          font-weight: 400;
          &::placeholder {
            color: rgba(204, 204, 204, 1);
          }
        }
        > .name {
          width: 120px;
          margin-right: 58px;
          font-size: 30px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
        }
      }
      > .code {
        border: none;
        position: relative;
        > input {
          width: 45%;
        }
        > .send_code {
          margin: auto;
          margin-right: 0;
          font-size: 30px;
          font-weight: 400;
          color: rgba(56, 126, 255, 1);
          position: absolute;
          right: 32px;
          .downNum-btn {
            color: #c0c4cc;
          }
        }
      }
    }
  }
  > .btn {
    margin: 0 auto;
    width: 650px;
    height: 90px;
    line-height: 90px;
    background: linear-gradient(
      90deg,
      rgba(255, 212, 154, 1),
      rgba(255, 191, 163, 1)
    );
    border-radius: 4px;
    font-size: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    &.active {
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
    }
  }
}
</style>
